<template>
  <div class="app-container">
    <div id="sjlx">
      <!-- <div>
        <span>数据类型：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="0">bug有效率</el-radio>
          <el-radio :label="1">bug总数</el-radio>
          <el-radio :label="2">bug状态</el-radio>
          <el-radio :label="3">bug解决方案</el-radio>
        </el-radio-group>
      </div> -->

      <div id="sx">
        <span>筛选条件：</span>
        <div>
          <el-row>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 项目： </el-col>
              <el-col :span="18">
                <el-select
                  @change="pChange"
                  filterable
                  v-model="value[0]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options[0]"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 子系统 </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[4]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[4]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 创建人： </el-col>
              <el-col :span="18">
                <el-select
                  v-model="value[1]"
                  filterable
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[1]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 指派人： </el-col>
              <el-col :span="18">
                <el-select
                  filterable
                  v-model="value[2]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[2]"
                    :key="item.name + '' + i"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-row>

          <el-row class="el-row">
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5">创建时间： </el-col>
              <el-col :span="18">
                <el-date-picker
                  style="width: 100%"
                  v-model="tiem"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5">解决时间：</el-col>

              <el-col :span="18">
                <el-date-picker
                  style="width: 100%"
                  v-model="tiem2"
                  type="daterange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> Bug状态： </el-col>
              <el-col :span="17">
                <el-select
                  filterable
                  v-model="value[3]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[3]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
            <el-col :span="6">
              <el-col style="line-height: 40px" :span="5"> 解决方案： </el-col>
              <el-col :span="17">
                <el-select
                  filterable
                  v-model="value[5]"
                  :clearable="true"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in options[5]"
                    :key="item.status + '' + i"
                    :label="item.status"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-col>
            </el-col>
          </el-row>
          <el-row class="el-row">
            <el-col :span="22" style="text-align: right; margin-top: 10px">
              <el-button type="primary" size="medium" @click="next(true)"
                >搜索</el-button
              >
              <el-button type="primary" size="medium" @click="resetting"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div id="data">
      <el-row>
        <!-- 13 -->
        <el-col :span="21">
          <!-- {{ Bug_detail_list.length }} -->
          <h3 style="line-height: 40px">Bug统计清单</h3>
        </el-col>
        <!-- <el-col :span="8"> -->
        <!-- <el-radio-group v-model="radio2" size="medium">
            <el-radio-button :label="0">全部</el-radio-button>
            <el-radio-button :label="1">已激活</el-radio-button>
            <el-radio-button :label="2">已解决</el-radio-button>
            <el-radio-button :label="3">已关闭</el-radio-button>
            <el-radio-button :label="4">空</el-radio-button>
          </el-radio-group> -->
        <!-- </el-col> -->
        <!-- <el-col :span="3"> -->
        <!-- <el-input v-model="input" placeholder="搜索"></el-input> -->

        <!-- <el-button type="primary" @click="download()">导出</el-button> -->
        <!-- <el-button type="primary" size="medium" @click="next(true)"
            >搜索</el-button
          > -->
        <!-- </el-col> -->
      </el-row>

      <el-table
        height="800"
        :data="Bug_detail_list"
        @sort-change="sortChange"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        ></el-table-column>

        <el-table-column prop="project_name" label="项目" width="260">
        </el-table-column>
        <el-table-column prop="subsys_name" label="子系统" width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="Bug_priority"
          label="严重程度"
          width="120"
          sortable
        >
        </el-table-column>
        <el-table-column align="center" prop="Bug_id" label="BugID" width="120">
        </el-table-column>
        <el-table-column prop="Bug_title" label="Bug标题" width="390">
        </el-table-column>
        <el-table-column
          prop="creator"
          label="创建人"
          width="120"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="create_date"
          label="创建时间"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column prop="assigner" label="指派人" width="120">
        </el-table-column>
        <el-table-column
          prop="sovled_date"
          label="解决时间"
          sortable
          width="180"
        >
        </el-table-column>
        <el-table-column prop="Bug_status" label="状态" width="120">
        </el-table-column>
        <el-table-column prop="solve_situation" label="解决方案" width="120">
        </el-table-column>
      </el-table>

      <!-- <el-row style="margin-top: 35px">
        <el-col :span="1">
          <el-checkbox @change="handleCheckedCitiesChange"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong>严重程度</strong>
        </el-col>
        <el-col :span="3">
          <strong>Bug标题</strong>
        </el-col>
        <el-col :span="3">
          <strong>创建人</strong>
        </el-col>
        <el-col :span="3">
          <strong>创建时间</strong>
        </el-col>
        <el-col :span="3">
          <strong>指派人</strong>
        </el-col>
        <el-col :span="3">
          <strong>解决时间</strong>
        </el-col>
        <el-col :span="3">
          <strong>状态</strong>
        </el-col>
        <el-col :span="2">
          <strong>解决方案</strong>
        </el-col>
      </el-row>
      <hr />
      <el-row
        v-for="(v, i) of Bug_detail_list"
        :key="v.Bug_id"
        style="margin-top: 35px"
      >
        <el-col :span="1">
          <el-checkbox v-model="checked[i]"></el-checkbox>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.Bug_priority }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.Bug_title }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.creator }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.create_date }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.assigner }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.sovled_date }}</strong>
        </el-col>
        <el-col :span="3">
          <strong>{{ v.Bug_status }}</strong>
        </el-col>
        <el-col :span="2">
          <strong>{{ v.solve_situation }}</strong>
        </el-col>
      </el-row> -->
      <div style="margin-top: 20px; text-align: right; padding-right: 55px">
        <!-- <el-button @click="upper()" type="primary">上一页</el-button>
        <el-button @click="next()" type="primary">下一页</el-button> -->
        <!-- :current-page="currentPage4" -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="pageNum"
          :page-sizes="[25, 50, 75, 100]"
          layout="total, sizes,prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <New></New>
    <Checking></Checking>
    <Close></Close> -->
  </div>
</template>

<script>
import * as bug from "@/api/bug";
// import New from "./new";
// import Checking from "./checking.vue";
// import Close from "./close";
// import { time } from "echarts";
export default {
  data() {
    return {
      options: [],
      value: [],
      radio: 0,
      radio2: 0,
      milestone_verison: "",
      subsystem: "",
      verison_NO: "",
      tester_name: "",
      date_range: "",
      select: null,
      Bug_detail_list: [],
      checked: [],
      tiem: [],
      tiem2: [],
      pageNo: 0,
      total: 0,
      pageNum: 25,
    };
  },
  // components: {
  //   New,
  //   Checking,
  //   Close,
  // },
  methods: {
    resetting() {
      this.value = [];
      this.tiem = [];
      this.tiem2 = [];
    },
    pChange(val) {
      if (val) {
        bug.SubsysList("?project_id=" + val).then((res) => {
          this.$set(this.options, 4, res.data.subsys_names);
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.getBugStatistics();
    },
    handleCurrentChange(val) {
      this.pageNo = val - 1;
      this.getBugStatistics();
      console.log(`当前页: ${val}`);
    },

    sortMethod(a, b) {
      return a.localeCompare(b);
    },
    sortChange({ column, prop, order }) {
      this.Bug_detail_list.sort((a, b) => {
        if (order === "ascending") {
          return this.sortMethod(a[prop], b[prop]);
        } else if (order === "descending") {
          return this.sortMethod(b[prop], a[prop]);
        } else {
          return this.sortMethod(a[prop], b[prop]);
        }
      });
    },
    handleCheckedCitiesChange(value) {
      console.log(this.checked);
      if (value) {
        for (let i in this.Bug_detail_list) {
          this.$set(this.checked, i, true);
        }
      } else {
        for (let i in this.Bug_detail_list) {
          this.$set(this.checked, i, false);
        }
      }
      console.log(this.checked);
    },
    download() {
      let data = [];
      for (let i in this.checked) {
        if (this.checked[i]) {
          data.push(this.Bug_detail_list[i].Bug_id);
        }
      }

      bug.download({ Bug_ids: data }).then((res) => {
        let blob = res;
        let reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onload = (e) => {
          let a = document.createElement("a");
          a.download = "bug_file.csv";
          a.href = e.target.result;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        };
      });
    },
    async getBugStatistics() {
      // let v5 = "";
      // switch (this.value[5]) {
      //   case "已修复":
      //     v5 = "fixed";
      //     break;
      //   case "不存在":
      //     v5 = "notrepro";
      //     break;
      //   case "外部原因":
      //     v5 = "external";
      //     break;
      //   case "不予修复":
      //     v5 = "willnotfix";
      //     break;
      //   case "设计如此":
      //     v5 = "bydesign";
      //     break;
      //   case "重复提交":
      //     v5 = "duplicate";
      //     break;
      //   case "待解决":
      //     v5 = "tostory";
      // }
      let v0 = -1;
      if (this.value[0] || this.value[0] == 0) v0 = this.value[0];

      let data = {
        project_id: v0,
        creator_name: this.value[1] || "",
        assigner_name: this.value[2] || "",
        Bug_status: this.value[3] || "",
        subsys_id: this.value[4] || "",
        solve_resolution: this.value[5],
        date_create_start: this.tiem[0] || "",
        date_create_end: this.tiem[1] || "",
        date_solve_start: this.tiem2[0] || "",
        date_solve_end: this.tiem2[1] || "",
        pageNo: this.pageNo,
        pageNum: this.pageNum,
      };
      let res = await bug.BugStatistics(data);
      if (res.data.Bug_detail_list) {
        this.total = res.data.Bug_total;
        this.Bug_detail_list = res.data.Bug_detail_list;
      }
    },
    next(f) {
      if (f) this.pageNo = 0;
      else this.pageNo++;
      this.getBugStatistics();
    },
    upper() {
      this.pageNo--;
      if (this.pageNo < 0) this.pageNo = 0;
      this.getBugStatistics();
    },
  },
  created() {
    this.getBugStatistics();

    setTimeout(() => {
      bug.projectList().then((res) => {
        this.$set(this.options, 0, res.data.project_names);
      });
    }, 1600);

    setTimeout(() => {
      bug.BugResolutionList().then((res) => {
        this.$set(this.options, 5, res.data.Bug_status);
      });
    });

    setTimeout(() => {
      bug.creatorList().then((res) => {
        this.$set(this.options, 1, res.data.creator_names);
      });

      bug.SubsysList().then((res) => {
        this.$set(this.options, 4, res.data.subsys_names);
      });
    }, 600);

    setTimeout(() => {
      bug.assignerList().then((res) => {
        this.$set(this.options, 2, res.data.assigner_names);
      });

      bug.BugstatusList().then((res) => {
        this.$set(this.options, 3, res.data.Bug_status);
      });
    }, 1000);
  },
};
</script>

<style scoped>
#sjlx span {
  margin-right: 30px;
}

#sx {
  margin-top: 20px;
}
#sx .el-row {
  margin: 20px 0;
}

#data {
  margin: 20px 20px;
}
</style>
